<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CustomerMain</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="../contextjs.jsp" %>
</head>
<body>
	<div id="cc" class="easyui-layout" style ="width:800px;height:600px;margin: auto;">   
	    <div data-options="region:'north',split:true,collapsible:false" style="height:100px;">
	    	<div style="text-align: center;padding-top: 5%">
	    		<input id="search" class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:50%;height: 35px;font: 28px;" > 
	    		<input type="button" value="搜索"  id="btn" /> 
	    	</div>
	    </div>   
	    <div data-options="region:'south',split:true,collapsible:false" style="height:100px;">
	    	
	    </div>   
	    <div data-options="region:'center',collapsible:false" style="background:#eee;height: 80%;">
		    <table  id="dd" class="easyui-datagrid">   
			</table>  
	    </div>   
	</div>
	<div id="gg"></div>   
</body>
 <script type="text/javascript">
 alert("跳转进入Customer页面");
        $(function () {  	
            var datagrid; //定义全局变量datagrid
            var editRow = undefined; //定义全局变量：当前编辑的行
            datagrid = $("#dd").datagrid({
                url: 'customer_CusList.action', //请求的数据源
                iconCls: 'icon-save', //图标
                pagination: true, //显示分页
                pageSize: 15, //页大小
                pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
                fit: true, //datagrid自适应宽度
                fitColumns: true, //列自适应宽度
                striped: true, //行背景交换
                nowap: true, //列内容多时自动折至第二行
                border: false,
                idField: 'cid', //主键
                queryParams: { search: $("#search").val()}, //查询参数
                columns: [[//显示的列
                    {field: 'cid', title: '编号', width: 100, sortable: true, checkbox: true },
                    { field: 'cname', title: '姓名', width: 100, sortable: true,
                        editor: { type: 'validatebox', options: { required: true} }
                    },
                     { field: 'csex', title: '性别', width: 100,
                         editor: { type: 'validatebox', options: { required: true} }
                     },
                     { field: 'cage', title: '年龄', width: 100,
                         editor: { type: 'validatebox' }
                     },
                     { field: 'carno', title: '车牌号码', width: 100,
                         editor: { type: 'validatebox'}
                     },
                     { field: 'clevel', title: '客户级别', width: 100,
                         editor: { type: 'validatebox'}
                     },
                     { field: 'costed', title: '已花费', width: 100,
                         editor: { type: 'validatebox'}
                     }
                      ]],

                toolbar: [
                 { text: '弹窗添加', iconCls: 'icon-add', handler: function () { 
                		var url="customer_addormodify.action?status=add";
                	 	$('#gg').dialog('refresh', url);  
                	 	gg.dialog('open');
                	   }
                 },"-",
                { text: '弹窗修改', iconCls: 'icon-add', handler: function () { 
                	 	var row= $('#dd').datagrid('getSelected');
                	 	var url="customer_addormodify.action?status=modify&cid="+row.cid;
                	 	$('#gg').dialog('refresh', url);  
             	 		gg.dialog('open');
             	   }
                 }, "-",{ text: '删除', iconCls: 'icon-remove', handler: function () {
                	 alert("点击了删除！");
            	 }
             }],
                onAfterEdit: function(rowIndex, rowData, changes) {
                }
            });
            
           var gg=$('#gg').dialog({
                title: 'My Dialog',
                width: 500,
                height: 400,
                closed: true,
                cache: false,
                href: "order_addormodify.action",
                modal: true
            });
           
           $("#btn").click(function(){
       			$("#dd").datagrid("load",{search:$("#search").val()});
       		});
        });
    </script>
</html>